<template>
    <div class="seller" ref="seller">
        <div class="seller-content">
            <div class="overview">
                <div class="title">{{seller.name}}</div>
                <div class="desc">
                    <span class="star"><star :size="36" :score="seller.score"></star></span>
                    <span class="text">({{seller.ratingCount}})</span>
                    <span class="text">月售{{seller.sellCount}}单</span>
                </div>
                <ul class="remark">
                    <li class="block">
                        <div class="title">起送价</div>
                        <div class="content"><span class="stress">{{seller.minPrice}}</span>元</div>
                    </li>
                    <li class="block">
                        <div class="title">商家配送</div>
                        <div class="content"><span class="stress">{{seller.deliveryPrice}}</span>元</div>
                    </li>
                    <li class="block">
                        <div class="title">平均配送时间</div>
                        <div class="content"><span class="stress">{{seller.deliveryTime}}</span>分钟</div>
                    </li>
                </ul>
                <div class="favorite" @click="toggleFavorite">
                    <span class="icon-favorite" :class="{'active':favorite}"></span>
                    <span class="text">{{favoriteText}}</span>
                </div>
            </div>
            <split></split>
            <div class="bulletin">
                <div class="title">公告与活动</div>
                <div class="content-wrapper">
                    <div class="content">{{seller.bulletin}}</div>
                </div>
            </div>
            <ul>
                <li class="support-item" v-for="(support,index) in seller.supports" :key="index">
                    <i class="icon" :class="classMap[support.type]"></i>
                    <span class="text">{{support.description}}</span>
                </li>
            </ul>
            <split></split>
            <div class="pics">
                <div class="title">商家实景</div>
                <div class="pic-wrapper" ref="picWrapper">
                    <ul class="pic-list" ref="picList">
                        <li class="pic-item" v-for="(pic,index) in seller.pics" :key="index">
                            <img :src="pic" width="120" height="90">
                        </li>
                    </ul>
                </div>
            </div>
            <split></split>
            <div class="info">
                <div class="title">商家信息</div>
                <ul>
                    <li class="info-item" v-for="(info,index) in seller.infos" :key="index">{{info}}</li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import BScroll from 'better-scroll';
import star from '../../components/star/star';
import split from '../../components/split/split';
    export default {
        props: {
            seller: {
                type: Object
            }
        },
        data () {
            return {
                classMap: [],
                favorite: false
            };
        },
        computed: {
            favoriteText () {
                return this.favorite ? '已收藏' : '收藏';
            }
        },
        created () {
            this.classMap = ['decrease', 'discount', 'guarantee', 'invoice', 'special'];
        },
        mounted () {
            this.$nextTick(() => {
                this._initScroll();
                this._initPics();
            });
        },
        watch: {
            'seller' () {
                this.$nextTick(() => {
                    this._initScroll();
                    this._initPics();
                });
            }
        },
        methods: {
            _initScroll () {
                if (!this.scroll) {
                    this.scroll = new BScroll(this.$refs.seller, {
                        click: true
                    });
                } else {
                    this.scroll.refresh();
                }
            },
            _initPics () {
                if (this.seller.pics) {
                    let picWidth = 120;
                    let margin = 6;
                    let width = (picWidth + margin) * this.seller.pics.length - margin;
                    this.$refs.picList.style.width = width + 'px';
                    this.$nextTick(() => {
                        if (!this.picScroll) {
                            this.picScroll = new BScroll(this.$refs.picWrapper, {
                                scrollX: true,
                                eventPassthrough: 'vertical'
                            });
                        } else {
                            this.picScroll.refresh();
                        }
                    });
                }
            },
            toggleFavorite (event) {
                if (!event._constructed) {
                    return;
                }
                this.favorite = !this.favorite;
            }
        },
        components: {
            star,
            split
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/stylus/mixin.styl'
.seller
    position :absolute
    top :174px
    left :0
    bottom :0
    width :100%
    overflow :hidden
    .overview
        position :relative
        padding :18px 18px 0
        font-size :0
        .title
            font-size :14px
            color :rgb(7,17,27)
            line-height :14px
        .desc
            padding :8px 8px 18px 0
            font-size :10px
            border-bottom :solid 1px rgba(7,17,27,0.1)
            .star
                display :inline-block
                vertical-align :top
            .text
                display :inline-block
                vertical-align :top
                margin-right :12px
                font-size :10px
                color :rgb(77,85,94)
                line-height :18px
        .remark
            display :flex
            .block
                flex :1
                margin :18px 0
                text-align :center
                border-right :solid 1px rgba(7,17,27,0.1)
                &:last-child
                    border :none
                .title
                    margin-bottom :4px
                    font-size :10px
                    color :rgb(147,153,159)
                    line-height :10px
                .content
                    font-size :10px
                    font-weight :200
                    color :rgb(7,17,27)
                    line-height :24px
                    .stress
                        font-size :24px
        .favorite
            position :absolute
            top :18px
            right :10px
            width :50px
            text-align :center
            font-size :0
            .icon-favorite
                font-size :24px
                color :#d4d6d9
                line-height :24px
                &.active
                    color :rgb(240,20,20)
            .text
                display :block
                margin-top :4px
                font-size :10px
                line-height :10px
                color: rgb(77, 85, 93)
    .bulletin
        margin :18px 18px 0
        .title
            margin-bottom :8px
            font-size :14px
            line-height :14px
            color :rgb(7,17,27)
        .content-wrapper
            padding :0 12px 16px
            .content
                font-size :12px
                font-weight :200
                color :rgb(240,20,20)
                line-height :24px
    .support-item
        padding :16px 0
        margin :0 18px
        font-size :0
        border-top :solid 1px rgba(7,17,27,0.1)
        .icon
            display :inline-block
            vertical-align :top
            width :16px
            height :16px
            margin-right :6px
            background-size :16px 16px
            background-repeat :no-repeat
            &.decrease
                bg-image('decrease_4')
            &.discount
                bg-image('discount_4')
            &.guarantee
                bg-image('guarantee_4')
            &.invoice
                bg-image('invoice_4')
            &.special
                bg-image('special_4')
        .text
            display :inline-block
            vertical-align :top
            font-size :12px
            font-weight :200
            color :rgb(7,17,27)
            line-height :16px
    .pics
        padding :18px 18px
        .title
            font-size :14px
            color :rgb(7,17,27)
            line-height :14px
            margin-bottom :12px
        .pic-wrapper
            width :100%
            overflow :hidden
            white-space :nowrap
            .pic-list
                font-size :0
                .pic-item
                    display :inline-block
                    width :120px
                    height :90px
                    margin-right :6px
                    &:last-child
                        margin :0
    .info
        margin :18px 18px 0
        .title
            font-size :14px
            color :rgb(7,17,27)
            line-height :14px
            margin-bottom :12px
        .info-item
            border-top :solid 1px rgba(7,17,27,0.1)
            padding :16px 12px
            font-size :12px
            font-weight :200
            color :rgb(7,17,27)
            line-height :16px
</style>
